<template>
	<view class="topic_item_layout" v-if="item">
		<text class="content_text">{{item.question_content}}</text>
		<!-- 选择题 -->
		<view class="options_container" v-if="[0,1].includes(item.question_type)">
			<view v-for="(option, index) in item.options" :key="option._id" class="options_item flex-row"
				@click="options_item_click(item, option)">
				<view v-if="showAnswer" :class="['options_letter_base', !item.is_answered && option.isSelect ? 'options_letter_select' : '',
										isSelectAndCorrect(option) ? 'options_icon_correct' : '',
										isSelectAndError(option) ? 'options_icon_error' : '']">
					{{option.option_code}}
				</view>
				<view v-else :class="['options_letter_base', option.isSelect ? 'options_letter_select' : '']">
					{{option.option_code}}
				</view>
				<view class="option_content_base">
					{{option.option_content}}
				</view>
			</view>
		</view>
		<view class="item_submit" v-if="showAnswer && !item.is_answered && item.question_type == 1"
			@click="item_submit_this">
			提交本题
		</view>
		<!-- 选项 - 判断题 -->
		<view v-if="item.question_type == 2" class="judge_container">
			<view v-for="(option, option_index) in item.options" :key="option._id" class="judge_item_container"
				@click="options_item_click(item, option)">
				<view v-if="showAnswer" :class="['uni_icons_parent',  isSelectAndCorrect(option) ? 'uni_icons_correct' : '', 
					isSelectAndError(option) ? 'uni_icons_error' : '']">
					<uni-icons :type="option_index == 0 ? 'checkmarkempty' : 'closeempty'" size="20"
						:color="isSelectAndCorrect(option) || isSelectAndError(option) ? '#fff' : '#A1A1A1'"></uni-icons>
				</view>
				<view v-else :class="['uni_icons_parent', option.isSelect ? 'uni_icons_select' : '']">
					<uni-icons :type="option_index == 0 ? 'checkmarkempty' : 'closeempty'" size="20"
						:color="option.isSelect ? '#fff' : '#A1A1A1'"></uni-icons>
				</view>
				<view class="judge_item_text"> {{option.option_content}} </view>
			</view>
		</view>
		<!-- 填空 -->
		<view class="the_blanks_container" v-if="item.question_type == 3">
			<textarea placeholder="请输入内容" maxlength="1000" class="the_blanks_textarea" :disabled='item.is_answered'
				v-model="item.answer_content"></textarea>
			<view v-if="showAnswer" :class="['the_blanks_submit', item.is_answered ? 'the_blanks_submit_disabled' : '']"
				@click="the_blanks_submit">提交本题</view>
		</view>
		<!-- 正确答案 -->
		<view class="answer_container" v-if="item.is_answered && showAnswer">
			<view class="answer_leading">
				<view class="answer_row" v-if="[0, 1, 2].includes(item.question_type)">
					正确答案： <text class="answer_correct">{{item.answer.join(",")}}</text>
				</view>
				<view v-else class="answer_row">
					推荐答案：<text> {{item.answer_fill_blanks}}</text>
				</view>
				<view class="answer_row" v-if="[0, 1, 2].includes(item.question_type)">
					你的选择： <text class="answer_answered">{{item.user_answer.join(",")}}</text>
				</view>
				<view class="answer_row flex-row" v-if="item.difficulty > 0">
					难度
					<uni-icons type="star-filled" color="#798490" size="18" v-for="(item, index) in item.difficulty"
						key="index" class="answer_difficulty"></uni-icons>
				</view>
			</view>
			<view class="answer_trailing" v-if="[0, 1, 2].includes(item.question_type)">
				<view v-if="isAnswerCorrect()" class="trailing_correct centent-parent flex-row">
					<view class="trailing_correct_icon_parent centent-parent flex-row">
						<uni-icons type="checkmarkempty" size="20" color="#10ae18" class="uni-icons"></uni-icons>
					</view>
					<view class="trailing_correct_text flex-row centent-parent">正确</view>
				</view>

				<view v-else class="trailing_error centent-parent flex-row">
					<view class="trailing_error_icon_parent centent-parent flex-row">
						<uni-icons type="closeempty" size="20" color="#E40C39" class="uni-icons"></uni-icons>
					</view>
					<view class="trailing_error_text flex-row centent-parent">错误</view>
				</view>
			</view>
		</view>

		<!-- 解析 -->
		<view class="analysis_container" v-if="item.is_answered && showAnswer">
			<view class="analysis_tips"> 解析： </view>
			<view class="analysis_content">
				<text> {{item.analysis || '略'}}</text>
			</view>
		</view>

		<!-- 笔记 -->
		<view class="note_container" v-if="item.note && showAnswer">
			<view class="note_tips"> 笔记： </view>
			<view class="note_content" v-if="item.note.disabled">
				{{item.note.content}}
			</view>
			<uni-easyinput v-else type="textarea" placeholder="请输入笔记" class="note_easyinput"
				v-model="item.note.content"></uni-easyinput>
		</view>
	</view>
</template>

<script setup>
	/**
	 * @property {Object} item 题目数据
	 * @property {Boolean} showAnswer 是否要展示答案
	 */
	const props = defineProps({
		item: Object,
		current: {
			type: Number
		},
		showAnswer: {
			type: Boolean,
			default: true
		}
	});

	import {
		ref,
		watch
	} from 'vue';

	import {
		stringFromValue
	} from '@/utils/question.js';

	const data = ref(null)

	watch(() => props.item, (newValue, oldValue) => {
		data.value = newValue
		if (data.value) {
			data.value.user_answer = []
			data.value.answer_content = ''
		}
	}, {
		immediate: true
	})

	/* 用户选择了该选项，并且该选项是正确答案 */
	function isUserAnswerAndCorrect(option) {
		if (!data.value.user_answer) {
			return
		}
		return data.value.user_answer.includes(option.option_code) && option.is_correct
	}

	/* 用户选择了该选项，但是该选项不是正确答案 */
	function isUserAnswerButError(option) {
		if (!data.value.user_answer) {
			return
		}
		return data.value.user_answer.includes(option.option_code) && !option.is_correct
	}

	/* 多选题提交答案 */
	function item_submit_this() {
		if (data.value.is_answered) {
			return
		}
		data.value.is_answered = true
	}

	/* 回答正确 */
	function isAnswerCorrect() {
		// 正确答案 和 你的选择 之间的差异
		let answer = data.value.answer.filter(obj => !data.value.user_answer.includes(obj))
		// 你的选择 和 正确答案 之间的差异
		let user_answer = data.value.user_answer.filter(obj => !data.value.answer.includes(obj))
		// 判断
		return answer.length == 0 && user_answer.length == 0
	}

	/* 点击了某个选项 */
	function options_item_click(item, option) {
		if (!props.showAnswer) {
			// 如果是单选
			if (item.question_type == 0) {
				item.options.forEach(obj => {
					if (obj != option) {
						obj.isSelect = false
					}
				})
			}
			option.isSelect = !option.isSelect
		} else {
			// 单选题 + 已经选择过了 不能再次选择
			if (data.value.is_answered) {
				return
			}
			// 记录当前选项的选中状态
			option.isSelect = !option.isSelect
			// 如果不是多选的话那么就把该题当做已选
			if (data.value.question_type != 1) {
				data.value.is_answered = true
			}
		}
		// 记录用户的选择项
		if (option.isSelect) {
			data.value.user_answer.push(option.option_code)
		} else {
			data.value.user_answer.splice(option.option_code, 1)
		}
	}

	function isSelectAndCorrect(option) {
		if (!data.value.is_answered) {
			return false
		}
		return option.isSelect && option.is_correct
	}

	function isSelectAndError(option) {
		if (!data.value.is_answered) {
			return false
		}
		return option.isSelect && !option.is_correct
	}

	function the_blanks_submit() {
		if (data.value.answer_content.length == 0) {
			uni.showToast({
				title: '请输入内容',
				icon: 'none'
			})
			return
		}
		if (data.value.is_answered) {
			return
		}
		data.value.is_answered = true
	}
</script>

<style lang="scss" scoped>
	.topic_item_layout {
		padding: 40rpx;

		.content_text {
			font-size: 28rpx;
			color: $me-color-gray-1;
		}

		.options_container {
			padding: 0 0 40rpx 0;

			.options_item {
				align-items: center;
				margin-top: 48rpx;

				.options_letter_base {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 60rpx;
					height: 60rpx;
					border-radius: 30rpx;
					color: $me-color-gray-1;
					border: 1rpx solid $me-color-gray-1;
				}

				.options_letter_select {
					color: #fff;
					background-color: $me-color-blue;
					border-color: $me-color-blue;
				}

				.option_content_base {
					flex: 1;
					font-size: 30rpx;
					margin-left: 20rpx;
					color: $me-color-gray-1;
				}

				.options_icon_correct {
					color: $me-color-green-1;
					border: 1rpx solid $me-color-green-1;
				}

				.options_icon_error {
					color: white;
					background-color: $me-color-red-1;
					border: 1rpx solid $me-color-red-1;
				}
			}
		}

		.item_submit {
			display: flex;
			justify-content: flex-end;
			color: $me-color-blue;
			padding: 10rpx 40rpx;
		}

		.judge_container {
			padding: 0 0 40rpx 0;

			.judge_item_container {
				display: flex;
				align-items: center;
				margin-top: 48rpx;
				flex-direction: row;

				.uni_icons_parent {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 50rpx;
					height: 50rpx;
					border-radius: 50%;
					border: 1rpx solid $me-color-gray-3;
				}

				.uni_icons_select {
					border-color: $me-color-blue;
					background-color: $me-color-blue;
				}


				.uni_icons_correct {
					background-color: $me-color-green-1;
					border: 1rpx solid $me-color-green-1;
				}

				.uni_icons_error {
					background-color: $me-color-red-1;
					border: 1rpx solid $me-color-red-1;
				}

				.judge_item_text {
					margin-left: 20rpx;
					color: $me-color-gray-1;
					font-size: 26rpx;
				}

				.judge_item_text_correct {
					color: $me-color-green-1;
				}

				.judge_item_text_error {
					color: $me-color-red-1;
				}
			}
		}

		.the_blanks_container {
			padding: 36rpx 0;

			.the_blanks_textarea {
				width: 100%;
				padding: 10rpx;
				font-size: 28rpx;
				border-radius: 8rpx;
				color: $me-color-gray-1;
				background-color: $me-color-background;
			}

			.the_blanks_textarea:disabled {
				color: $me-color-gray-7;
			}

			.the_blanks_submit {
				color: #fff;
				display: flex;
				align-items: center;
				justify-content: center;
				width: fit-content;
				padding: 16rpx 80rpx;
				margin: 36rpx auto 0;
				border-radius: 8rpx;
				background-color: $me-color-blue;
			}

			.the_blanks_submit_disabled {
				color: $me-color-gray-7;
			}
		}

		.answer_container {
			display: flex;
			padding: 36rpx 0;
			border-top: 1rpx solid $me-color-background;

			.answer_leading {
				flex: 1;
				display: grid;
				gap: 16rpx;

				.answer_row {
					display: flex;
					align-items: center;
					font-size: 28rpx;
					color: $me-color-gray-1;

					.answer_correct {
						font-size: 28rpx;
						color: $me-color-green-1;
					}

					.answer_answered {
						font-size: 28rpx;
						color: $me-color-red-1;
					}

					.answer_difficulty {
						margin-left: 10rpx;
					}
				}
			}

			.answer_trailing {
				display: flex;
				align-items: center;
				justify-content: center;

				.trailing_correct {
					border: 1rpx solid $me-color-green-1;
					height: fit-content;
					width: 160rpx;
					height: 60rpx;
					justify-content: space-between;
					border-radius: 30rpx;

					.trailing_correct_icon_parent {
						width: 48rpx;
						height: 48rpx;
						border-radius: 50%;
						background-color: white;
						margin-left: 4rpx;
						box-shadow: 0 0 10rpx 2rpx $me-color-green-1;

						.uni-icons {
							width: 44rpx;
							height: 44rpx;
							border: 1rpx solid $me-color-green-1;
							border-radius: 50%;
						}
					}

					.trailing_correct_text {
						flex: 1;
						font-size: 28rpx;
						color: $me-color-green-1;
					}
				}

				.trailing_error {
					border: 1rpx solid $me-color-red-1;
					height: fit-content;
					width: 160rpx;
					height: 60rpx;
					justify-content: space-between;
					border-radius: 30rpx;

					.trailing_error_icon_parent {
						width: 48rpx;
						height: 48rpx;
						border-radius: 50%;
						background-color: white;
						margin-left: 4rpx;
						box-shadow: 0 0 10rpx 2rpx $me-color-red-1;

						.uni-icons {
							width: 44rpx;
							height: 44rpx;
							border: 1rpx solid $me-color-red-1;
							border-radius: 50%;
						}
					}

					.trailing_error_text {
						flex: 1;
						font-size: 28rpx;
						color: $me-color-red-1;
					}
				}
			}
		}

		.analysis_container {
			padding: 36rpx 0;
			border-top: 1rpx solid $me-color-background;

			.analysis_tips {
				font-size: 28rpx;
			}

			.analysis_content {
				margin-top: 16rpx;
				color: $me-color-gray-6;

				text {
					font-size: 28rpx;
					color: $me-color-gray-1;
				}
			}
		}

		.note_container {
			padding: 36rpx 0;
			border-top: 1rpx solid $me-color-background;

			.note_tips {
				font-size: 28rpx;
			}

			.note_content {
				margin-top: 16rpx;
				font-size: 28rpx;
			}

			.note_easyinput {
				margin-top: 16rpx;
				background-color: red;
			}
		}
	}
</style>